<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>宅鱼</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="google-site-verification" content="yH7MwnMb7LXru16F4FAfY94pn-oZLhF8Szu4PuL7Oxw" />
  <meta name="description" content="前端，技术，博客，记录，javascript，html5，css">
<meta property="og:type" content="website">
<meta property="og:title" content="宅鱼">
<meta property="og:url" content="http://ikkkr.com/page/2/index.html">
<meta property="og:site_name" content="宅鱼">
<meta property="og:description" content="前端，技术，博客，记录，javascript，html5，css">
<meta property="og:locale" content="default">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="宅鱼">
<meta name="twitter:description" content="前端，技术，博客，记录，javascript，html5，css">
  
    <link rel="alternative" href="/atom.xml" title="宅鱼" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.ico"  type="image/x-ico">
   
  <link rel="stylesheet" href="/css/style.css">
  

</head>
<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">宅鱼</a>
      </h1>
      
        <h2 id="subtitle-wrap">
          <a href="/" id="subtitle">部落格</a>
        </h2>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">首页</a>
        
          <a class="main-nav-link" href="/archives">文章</a>
        
          <a class="main-nav-link" href="/raincss">RainCSS</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://ikkkr.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main">
  
    <article id="post-9个GIF动画阐述Web设计的25年历史" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2014/12/16/9个GIF动画阐述Web设计的25年历史/" class="article-date">
  <time datetime="2014-12-16T02:27:49.000Z" itemprop="datePublished">2014-12-16</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2014/12/16/9个GIF动画阐述Web设计的25年历史/">9个GIF动画阐述Web设计的25年历史</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p><img src="http://ww4.sinaimg.cn/mw690/629342f9jw1enbbkqq4f9g20hs053mxl.gif" alt="html历史"><br><img src="http://ww2.sinaimg.cn/mw690/629342f9jw1enbbkt71qog20hs053dpk.gif" alt="html历史"><br><img src="http://ww2.sinaimg.cn/mw690/629342f9jw1enbbkw7wzhg20hs053go1.gif" alt="html历史"><br><img src="http://ww3.sinaimg.cn/mw690/629342f9jw1enbbmcanvzg20hs0531d6.gif" alt="html历史"><br><img src="http://ww3.sinaimg.cn/mw690/629342f9jw1enbbmfltegg20hs053abi.gif" alt="html历史"><br><img src="http://ww4.sinaimg.cn/mw690/629342f9jw1enbbmv5cbvg20hs053gv3.gif" alt="html历史"><br><img src="http://ww4.sinaimg.cn/mw690/629342f9jw1enbbn0ehyag20hs053n9i.gif" alt="html历史"><br><img src="http://ww2.sinaimg.cn/mw690/629342f9jw1enbbn4p7hog20hs053440.gif" alt="html历史"><br><a href="http://www.fastcodesign.com/3039402/the-history-of-web-design-explained-in-9-gifs" target="_blank" rel="noopener">The History Of Web Design Explained In 9 GIFs</a></p>

      
    </div>
    <footer class="article-footer">
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/前端/">前端</a></li></ul>

    </footer>
  </div>
  


</article>
  
    <article id="post-requirejs里面ajax回调不执行" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2014/11/24/requirejs里面ajax回调不执行/" class="article-date">
  <time datetime="2014-11-24T12:46:22.000Z" itemprop="datePublished">2014-11-24</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/模块化/">模块化</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2014/11/24/requirejs里面ajax回调不执行/">requirejs里面ajax回调不执行等问题</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <ol>
<li>requirejs里面ajax回调不执行<br>该问题主要是因为使用json文件模拟远程接口，requirejs默认不执行该callback（很奇怪的问题），把接口换成php的即可<pre><code class="javascript">$.ajax({<span class="attr">url</span>:<span class="string">"js/app/data/searchData.php"</span>,<span class="attr">cache</span>:<span class="literal">false</span>,<span class="attr">success</span>:<span class="function"><span class="keyword">function</span>(<span class="params">d</span>)</span>{
        smainhtml = m(d);
        main.add(smainhtml);
        }}
);
</code></pre>
</li>
<li>r.js 合并requirejs里面的模块报错<pre><code class="javascript">paths: {
    jquery: [ <span class="string">'lib/jquery-1.7.2.min'</span>, <span class="string">'http://cdn.staticfile.org/jquery/1.7.2/jquery.min'</span>]
}
</code></pre>
需要改成:<pre><code class="javascript">paths: {
    jquery:  <span class="string">'lib/jquery-1.7.2.min'</span>
}
</code></pre>
</li>
</ol>

      
    </div>
    <footer class="article-footer">
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/requirejs/">requirejs</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/模块化/">模块化</a></li></ul>

    </footer>
  </div>
  


</article>
  
    <article id="post-如何开发一个简单易用的前端代码库" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2014/11/12/如何开发一个简单易用的前端代码库/" class="article-date">
  <time datetime="2014-11-12T02:47:46.000Z" itemprop="datePublished">2014-11-12</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2014/11/12/如何开发一个简单易用的前端代码库/">如何开发一个简单易用的前端代码库</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>##一些问题</p>
<ol>
<li><p>现有框架解决了什么问题，缺点是什么？<br>样式重设，IE bug处理，缺点是没有进行对象结构扩展，实现最大程度的复用。</p>
</li>
<li><p>我所面临的问题？<br>不断重复类似功能的代码,并且面向结构，复用度太低,应该在功能上进行完全的分离。</p>
</li>
<li><p>我要实现的目标？<br>90%以上css代码的重用，面向对象结构，加入细粒度对象和布局对象，加入CSS交互控制模块和css插件模块。</p>
</li>
<li><p>优点?<br>多浏览器兼容,遵循web标准,代码量少,结构清晰,快速开发,高度复用，维护简便，易于理解使用。</p>
</li>
<li><p>框架带来的问题?<br>Html页面过多的class元素，因为放弃多级选择器，导致原本不使用class的元素使用class。</p>
</li>
<li><p>如何实现高度复用和简便维护?<br>加入大量的原子对象，以进行自由的重用。<br>增加页面常用对象,以便在项目代码中进行重写。<br>在元素的命名等方面进行约束,避免后期维护困难。</p>
</li>
</ol>
<p>##一个前端库诞生<br><img src="http://ww1.sinaimg.cn/mw690/629342f9jw1em81vgn3jpj20go0dbt9f.jpg" alt="rain css"></p>
<p><a href="http://rainzhai.github.io/raincss/" target="_blank" rel="noopener">rain css代码库</a></p>
<p>##Rain css代码结构<br><img src="http://ww4.sinaimg.cn/mw690/629342f9jw1emabetso54j20dp09l75a.jpg" alt="结构"></p>
<p>##css代码库过大如何处理<br>使用copyCss来进行过滤</p>
<p>##兼容移动端<br>使用 CSS3 Media Queries来对专门的class进行重写，并新增移动端专用class</p>
<p>##进行hybrid开发的优势<br>1.无需对单独模块增加专门样式文件<br>2.html模块中的class可以方便快速的修改而不影响其他功能模块</p>

      
    </div>
    <footer class="article-footer">
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/前端/">前端</a></li></ul>

    </footer>
  </div>
  


</article>
  
    <article id="post-requirejs主数据data-main如何清除缓存" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2014/11/11/requirejs主数据data-main如何清除缓存/" class="article-date">
  <time datetime="2014-11-11T04:49:08.000Z" itemprop="datePublished">2014-11-11</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/模块化/">模块化</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2014/11/11/requirejs主数据data-main如何清除缓存/">requirejs主数据data-main如何清除缓存</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>对各个模块的js文件进行缓存清除，需要在main.js里面加入</p>
<pre><code class="javascript"><span class="built_in">require</span>.config({
    urlArgs: <span class="string">'v='</span>+<span class="keyword">new</span> <span class="built_in">Date</span>().getTime()
});
</code></pre>
<p>&lt;script type=”text/javascript”&gt;</p>
<pre><code class="javascript"><span class="keyword">var</span> <span class="built_in">require</span> = {
baseUrl: <span class="string">""</span>,
waitSeconds: <span class="number">5</span>,
urlArgs : <span class="string">"bust="</span>+<span class="keyword">new</span> <span class="built_in">Date</span>().getTime()
};
</code></pre>
<p>&lt;/script&gt; <br><br>&lt;script type=”text/javascript”  src=”js/lib/require.js” data-main=”js/main” &gt;&lt;/script&gt; </p>

      
    </div>
    <footer class="article-footer">
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/requirejs/">requirejs</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/模块化/">模块化</a></li></ul>

    </footer>
  </div>
  


</article>
  
    <article id="post-phonegap-开发环境搭建及一些问题处理" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2014/10/30/phonegap-开发环境搭建及一些问题处理/" class="article-date">
  <time datetime="2014-10-30T10:06:09.000Z" itemprop="datePublished">2014-10-30</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/hybrid/">hybrid</a>►<a class="article-category-link" href="/categories/hybrid/phonegap/">phonegap</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2014/10/30/phonegap-开发环境搭建及一些问题处理/">phonegap 开发环境搭建及问题处理</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="windows下phonegap-开发环境搭建"><a href="#windows下phonegap-开发环境搭建" class="headerlink" title="windows下phonegap 开发环境搭建"></a>windows下phonegap 开发环境搭建</h2><ul>
<li>安装java环境，安装nodejs，安装集成了ADT的eclipse <a href="http://developer.android.com/sdk/index.html" target="_blank" rel="noopener">eclipse下载地址</a>,下载并解压一个ant工具。</li>
<li>添加下 java JDK  ; Ant ;这几个文件的bin文件目录到系统变量，android SDK的sdk目录，platform-tools目录和tools目录到系统变量</li>
<li>工具安装完成后,通过npm安装phonegap,cordova代码:<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm install -g phonegap</span><br><span class="line">npm install -g cordova</span><br></pre></td></tr></table></figure>
</li>
</ul>
<p>这里有个问题要设置npm代理，而且要设置https的代理，不然在创建phonegap项目的时候会出现无法下载git项目包的问题(感谢俊江同学及时的建议^0^)<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$ npm config set proxy http:<span class="comment">//server:port</span></span><br><span class="line">$ npm config set https-proxy http:<span class="comment">//server:port</span></span><br><span class="line">$ npm config set registry <span class="string">"http://registry.npmjs.org/"</span></span><br></pre></td></tr></table></figure></p>
<ul>
<li><p>创建项目使用命令:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">phonegap create myapp</span><br><span class="line">cd myapp</span><br><span class="line">phonegap run android</span><br></pre></td></tr></table></figure>
</li>
<li><p>在重装phonegap后有一个奇怪的问题，phonegap命令失效，这时候需要使用cordova命令就可以了。。</p>
</li>
<li>这里如果出现编译报错,问题一是环境变量没设置好，另外就是sdk\platforms 下的版本不对，需要下载对应版本的android文件包，另外一个问题是高版本的模拟器不能创建avd所以需要略低版本的android文件包(如果使用手机作测试则不需要考虑这个问题)</li>
<li>添加插件来调用弹窗<br>这里的插件添加具体安装命令需要参照<a href="http://docs.phonegap.com/en/edge/cordova_notification_notification.md.html#notification.confirm_full_example" target="_blank" rel="noopener">phonegap文档</a>。另外需要在手机查看具体效果，在虚拟机上会出现报错(很怪异的状况)。<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.addEventListener(<span class="string">"deviceready"</span>, onDeviceReady, <span class="literal">false</span>);</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">onDeviceReady</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">document</span>.addEventListener(<span class="string">"backbutton"</span>,onBackKeyDown, <span class="literal">false</span>);    </span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">onConfirm</span>(<span class="params">i</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span>(i==<span class="number">1</span>)&#123; navigator.app.exitApp(); &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">onBackKeyDown</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  navigator.notification.confirm(</span><br><span class="line">      <span class="string">'按确定退出!'</span>,</span><br><span class="line">      onConfirm,</span><br><span class="line">      <span class="string">'确定退出玩的么吗?'</span>,</span><br><span class="line">      [<span class="string">'确定'</span>,<span class="string">'取消'</span>]</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ul>
<p>参考地址：(<a href="http://blog.csdn.net/aaawqqq/article/details/19755179" target="_blank" rel="noopener">http://blog.csdn.net/aaawqqq/article/details/19755179</a>)<br>ps: 电脑全局代理设置可以使用Proxifier</p>
<h2 id="titanium环境搭建的问题"><a href="#titanium环境搭建的问题" class="headerlink" title="titanium环境搭建的问题"></a>titanium环境搭建的问题</h2><p>1.nodejs和msysgit(<a href="http://git-scm.com)需要事先下载并安装好" target="_blank" rel="noopener">http://git-scm.com)需要事先下载并安装好</a><br>2.jdk需要安装32位的，64位jdk会导致titanium studio无法启动</p>
<h2 id="phonegap-IOS打包"><a href="#phonegap-IOS打包" class="headerlink" title="phonegap IOS打包"></a>phonegap IOS打包</h2><p>1.创建项目 cordova create hello com.example.hello HelloWorld<br>2.cordova build ios 来编译ios项目<br>3.使用xcode引入项目<br>4.build setting中的code signing选择项目的provisoning profile<br>5.编译器选为Generic IOS Device，然后进行archive。<br>6.若之前有版本上传则需修改版本号</p>

      
    </div>
    <footer class="article-footer">
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/html5/">html5</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/hybrid/">hybrid</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/webapp/">webapp</a></li></ul>

    </footer>
  </div>
  


</article>
  
    <article id="post-D2-2014的一点总结" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2014/10/28/D2-2014的一点总结/" class="article-date">
  <time datetime="2014-10-28T02:41:19.000Z" itemprop="datePublished">2014-10-28</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2014/10/28/D2-2014的一点总结/">D2 2014的一点总结</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="有关Hybrid客户端H5的内容"><a href="#有关Hybrid客户端H5的内容" class="headerlink" title="有关Hybrid客户端H5的内容"></a>有关Hybrid客户端H5的内容</h2><p>这次参加D2前端大会，有关客户端H5的内容《航旅无线H5技术体系成长之路》和自己的工作比较相关，会后再看了下ppt，结合苏宁互联手机客户端客户端开发现状，个人作了几点总结:</p>
<ul>
<li>离线包机制</li>
<li>前端html5 页面和客户端通信</li>
<li>构建与发布流程</li>
</ul>
<h3 id="离线包机制"><a href="#离线包机制" class="headerlink" title="离线包机制"></a>离线包机制</h3><p>弘树在讲hybrid的时候多次且反复提到了前端h5页面和客户端通信的方式，并且在开端部分，讲到了为什么不使用html web app的原因，究其根本就是网速慢<br>带了的用户访问一个页面等待半天的问题(说到这个个人就想扯个蛋，尼玛在某国都秒下电影了，咱才开始推4g,能再慢点吗-_-)。<br>在网速特么慢的这种情况下，离线包把前端文件打包到app里面，用户打开app访问的是app里面的html5页面部分数据从服务端拉取，速度能提升不少。不过这个貌似需要和客户端配合一起完成，真正来完成离线包还是需要客户端开发人员来完成。</p>
<h3 id="前端html5-页面和客户端通信"><a href="#前端html5-页面和客户端通信" class="headerlink" title="前端html5 页面和客户端通信"></a>前端html5 页面和客户端通信</h3><p>这一部分有很大一个篇幅讲到了，说实话，没搞过客户端开发的前端不一定能理解，毕竟里面大部分设计到客户端开发相关的内容。另外关于互通有个很重要的概念Bridge，全篇只谈到了概念，没有上代码，略难猜测-_-</p>
<h3 id="构建与发布流程"><a href="#构建与发布流程" class="headerlink" title="构建与发布流程"></a>构建与发布流程</h3><p>该部分有基础kissy库，加上已经完善的发布流程，这一块我们没有一个统一的前端库，暂时很难做到一致。至于less和sass我觉得主要是看开发自身需要，比如我就没有使用less或sass的习惯。<br>最后，作者讲到hybrid中的h5类似一辆开的很快的拖拉机上了高速路。我觉得很多时候，具体问题还得看场景，比如一个很慢的2g网络环境，使用h5来拉数据和使用原生app来拉数据，不见得哪个会快到哪里去，但是如果在网络环境良好的情况下，使用h5却可以带来很大的灵活性和可维护性，当然页面功能足够简单的时候，不失为一个很好的移动开发方案。</p>
<h3 id="使用phonegap开发的一点体会"><a href="#使用phonegap开发的一点体会" class="headerlink" title="使用phonegap开发的一点体会"></a>使用phonegap开发的一点体会</h3><p>在使用phonegap搭建hybrid应用，可以发现phonegap的整个www目录可以作为hybrid应用的离线包，样式，js文件等都存放在改目录，并且phonegap中一些访问外网，硬件等特性需要在config.xml文件中配置。具体结构如下:<br><img src="http://ww1.sinaimg.cn/mw690/629342f9jw1elz3i5w77gj203p052745.jpg" alt="phonegap文件目录"><br>另外最近看到一篇很详尽的介绍phonegap运行机制的文章很不错，<a href="http://www.wojilu.com/forum1/post/22475" target="_blank" rel="noopener">PhoneGap版支付宝Android客户端开发小结</a> 里面关于phonegap的结构图：<br><img src="http://ww2.sinaimg.cn/mw690/629342f9jw1elucqjmegfj20sg0kz42i.jpg" alt="phonegap结构"><br>ps: phonegap在安卓上面的性能还是略慢，会后@Ngot_ftd 讲过另外一个混合的比较彻底的hybrid框架：Titanium。按照Titanium的说法，其本身就是内置于安卓代码库，不同于phonegap对文件请求进行拦截，所以运行效率有个质的提升。当然，航旅是使用内部开发的node工具进行混合app的开发，其具体实现需要客户端开发提供js对象的支持,具体的通信拦截，就需要该对象的方法调用了。</p>

      
    </div>
    <footer class="article-footer">
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/D2/">D2</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/hybrid/">hybrid</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/前端/">前端</a></li></ul>

    </footer>
  </div>
  


</article>
  
    <article id="post-hexo搭建blog要注意的几点" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2014/10/22/hexo搭建blog要注意的几点/" class="article-date">
  <time datetime="2014-10-22T06:12:50.000Z" itemprop="datePublished">2014-10-22</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/blog/">blog</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2014/10/22/hexo搭建blog要注意的几点/">hexo搭建blog要注意的几点</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>1.默认使用的googleapi导致加载很慢需要重新修改css，和js的href<br>2.修改css样式需要在 主题下的source 下的 _variables.styl 文件中修改一些样式的变量<br>
        
          <p class="article-more-link">
            <a href="/2014/10/22/hexo搭建blog要注意的几点/#more">阅读原文 Read More</a>
          </p>
        
      
    </div>
    <footer class="article-footer">
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/blog/">blog</a></li></ul>

    </footer>
  </div>
  


</article>
  
    <article id="post-e8-99-9a-e6-8b-9f-e8-bf-90-e8-90-a5-e5-95-86ued-e5-89-8d-e7-ab-af-e5-b0-8f-e7-bb-844-e6-9c-8825-e5-8f-b7-e5-88-86-e4-ba-ab-e6-80-bb-e7-bb-93" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2014/05/13/e8-99-9a-e6-8b-9f-e8-bf-90-e8-90-a5-e5-95-86ued-e5-89-8d-e7-ab-af-e5-b0-8f-e7-bb-844-e6-9c-8825-e5-8f-b7-e5-88-86-e4-ba-ab-e6-80-bb-e7-bb-93/" class="article-date">
  <time datetime="2014-05-13T11:31:32.000Z" itemprop="datePublished">2014-05-13</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/CSS-amp-HTML/">CSS &amp; HTML</a>►<a class="article-category-link" href="/categories/CSS-amp-HTML/html5/">html5</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2014/05/13/e8-99-9a-e6-8b-9f-e8-bf-90-e8-90-a5-e5-95-86ued-e5-89-8d-e7-ab-af-e5-b0-8f-e7-bb-844-e6-9c-8825-e5-8f-b7-e5-88-86-e4-ba-ab-e6-80-bb-e7-bb-93/">虚拟运营商UED前端小组4月25号分享总结</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p><strong>1.css3卡牌翻转效果</strong><br>css:<br>    .animate{-webkit-perspective:1000;width:80px;height:100px;position:relative;overflow:hidden;}<br>    .face{ rotateY(0deg); width:80px;height:100px;position:absolute;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-webkit-transition: all .25s linear ;-webkit-transform-style: preserve-3d;}<br>    .back{background:green;-webkit-transform: rotateY(-180deg);width:80px;height:100px;}<br>    .front{background:red;width:80px;height:100px;}<br>    .animate:hover .front{-webkit-transform: rotateY(180deg);}<br>    .animate:hover .back{-webkit-transform: rotateY(0deg);}<br>html:<br>    <div class="animate"><br>          <div class="face front"></div><br>          <div class="face back"></div><br>    </div></p>
<p><strong>2. 不声明第三个变量的值交换</strong><br>算术方法<br>    var a=10,b=12;<br>    a=b-a;<br>    b=b-a;<br>    a=b+a;<br>位运算<br>    var a=10,b=12;<br>    a=a^b;<br>    b=a^b;<br>    a=a^b;<br>栈实现<br>    var a=1,b=2;<br>    a=[b,b=a][0];<br><strong>3.Zen Coding基本使用</strong></p>
<p>E 元素名称(div, p);<br>E#id 使用id的元素(div#content, p#intro, span#error);<br>E.class 使用类的元素(div.header, p.error.critial). 你也可以联合使用class和idID: div#content.column.width;<br>E&gt;N 子代元素(div&gt;p, div#footer&gt;p&gt;span);<br>E+N 兄弟元素(h1+p, div#header+div#content+div#footer);<br>EN 元素倍增(ul#nav&gt;li5&gt;a);<br>E$N 条目编号 (ul#nav&gt;li.item-$5);</p>

      
    </div>
    <footer class="article-footer">
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/css3/">css3</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/html5/">html5</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/ued/">ued</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/分享/">分享</a></li></ul>

    </footer>
  </div>
  


</article>
  
    <article id="post-3-e6-9c-8828-e6-97-a5-e8-99-9a-e6-8b-9f-e8-bf-90-e8-90-a5-e5-95-86ued-e5-89-8d-e7-ab-af-e5-b0-8f-e7-bb-84-e7-9a-84-e5-88-86-e4-ba-ab-e6-80-bb-e7-bb-93" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2014/05/08/3-e6-9c-8828-e6-97-a5-e8-99-9a-e6-8b-9f-e8-bf-90-e8-90-a5-e5-95-86ued-e5-89-8d-e7-ab-af-e5-b0-8f-e7-bb-84-e7-9a-84-e5-88-86-e4-ba-ab-e6-80-bb-e7-bb-93/" class="article-date">
  <time datetime="2014-05-08T10:04:02.000Z" itemprop="datePublished">2014-05-08</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/CSS-amp-HTML/">CSS &amp; HTML</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2014/05/08/3-e6-9c-8828-e6-97-a5-e8-99-9a-e6-8b-9f-e8-bf-90-e8-90-a5-e5-95-86ued-e5-89-8d-e7-ab-af-e5-b0-8f-e7-bb-84-e7-9a-84-e5-88-86-e4-ba-ab-e6-80-bb-e7-bb-93/">3月28日虚拟运营商ued前端小组的分享总结</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>3月28号分享的小伙伴们: <a href="http://weibo.com/u/2357237630" target="_blank" rel="noopener">@雷锋很忙灬</a>，<a href="http://weibo.com/u/1832471412" target="_blank" rel="noopener">@灰客的微博</a></p>
<p>1. 在一行图文混排的文本里面图片添加 vertical-align: middle; 可以使得文本垂直居中显示<br><img src="http://www.webdevelopmentmachine.com/blog/wp-content/uploads/2014/05/vmimg_1.jpg" alt="文本的垂直居中"></p>
<p>2.ie6下面一些兼容性问题的处理<br>一：误区：IE6不兼容display:inline-block。实例:IE-ib.html。<br>        看出：ie并非不是不兼容inline-block只是做的不完整，在块状元素中的不兼容。<br>        同样的例子是!important在IE6中也是能够识别的,只是必须放在单独的一个{}块中。<br>二：display:inline-block的问题和兼容。<br>    [1:]float的双边距的问题。<br>    [2:]display:inline-block在IE 7以及以下 的浏览器不识别。兼容css为：{<em>display:inline;zoom:1}或者<br>            div{display:inline-block;….}<br>            div{display:inline;}<br>    [3:]display:inline-block的时候出现4像素的空隙问题。解决方案{<br>        1.在ul的元素上面加上:[font-size: 0;letter-spacing: -4px;word-spacing: -4px;//兼容safari]<br>        2.在li的元素上面加上:[font-size: 16px;letter-spacing: normal;word-spacing: normal;]<br>    }<br>三：display:inline-block的实例：iblock.html<br>     达到”show.jpg的效果”<br>    [1:]min-height:在IE6下面的解决兼容方法<br>    给块元素设置<br>    zoom: 1;
    </em>display: inline;<br>    然后min-height就会生效<br>    [2:]IE6下面注释的BUG.(中文注释导致的问题。)最好在<em>/之前加上三个**</em>的形式。</p>

      
    </div>
    <footer class="article-footer">
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/ued/">ued</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/分享/">分享</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/前端/">前端</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/总结/">总结</a></li></ul>

    </footer>
  </div>
  


</article>
  
    <article id="post-e7-94-a8html5css3-e7-bb-99-e5-a5-b3-e6-9c-8b-e5-8f-8b-e9-80-81-e4-b8-aa-e7-94-9f-e6-97-a5-e8-9b-8b-e7-b3-95" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2014/04/28/e7-94-a8html5css3-e7-bb-99-e5-a5-b3-e6-9c-8b-e5-8f-8b-e9-80-81-e4-b8-aa-e7-94-9f-e6-97-a5-e8-9b-8b-e7-b3-95/" class="article-date">
  <time datetime="2014-04-28T06:58:34.000Z" itemprop="datePublished">2014-04-28</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/html5/">html5</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2014/04/28/e7-94-a8html5css3-e7-bb-99-e5-a5-b3-e6-9c-8b-e5-8f-8b-e9-80-81-e4-b8-aa-e7-94-9f-e6-97-a5-e8-9b-8b-e7-b3-95/">用HTML5/CSS3给女朋友送个生日蛋糕</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>  现在有了 HTML5，我们在浏览器上制作动画已经不是什么难事了，但是一个好的创意却很难，比如说用技术来博得女孩子的喜欢。今天我们分享的这款生日蛋糕动画非常有创意，它是用 svg 来做的，利用 HTML5 的 api 让制作蛋糕的过程展示出来，这个蛋糕在妹子生日的时候送给她一定会让她觉得很惊奇。祝你成功哦！<br><a href="http://www.html5tricks.com/demo/html5-css3-new-cake/index.html" target="_blank" rel="noopener"><img src="http://www.html5tricks.com/wp-content/uploads/2014/04/html5-css3-new-cake.jpg" alt="html5-css3-new-cake"></a></p>
<ul>
<li><a href="http://www.html5tricks.com/demo/html5-css3-new-cake/index.html" target="_blank" rel="noopener">在线演示</a>&nbsp;&nbsp;</li>
<li><a href="http://www.html5tricks.com/download/html5-css3-new-cake.rar" target="_blank" rel="noopener">源码下载</a><br>原文链接：<a href="http://www.html5tricks.com/html5-css3-new-cake.html" target="_blank" rel="noopener">http://www.html5tricks.com/html5-css3-new-cake.html</a></li>
</ul>

      
    </div>
    <footer class="article-footer">
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/css3/">css3</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/html5/">html5</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/svg/">svg</a></li></ul>

    </footer>
  </div>
  


</article>
  
  
    <nav id="page-nav">
      <a class="extend prev" rel="prev" href="/">&laquo; Prev</a><a class="page-number" href="/">1</a><span class="page-number current">2</span><a class="page-number" href="/page/3/">3</a><a class="page-number" href="/page/4/">4</a><span class="space">&hellip;</span><a class="page-number" href="/page/13/">13</a><a class="extend next" rel="next" href="/page/3/">Next &raquo;</a>
    </nav>
  
</section>
        
          <aside id="sidebar">
  
    <div class="widget-wrap">
  <h3 class="widget-title">Github</h3>
  <div class="widget">
    <ul class="category-list"><li class="category-list-item"><a href="https://github.com/rainzhai">https://github.com/rainzhai</a></li></ul>
  </div>
</div>

  <div class="widget-wrap">
    <h3 class="widget-title">分类 Categories</h3>
    <div class="widget">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/CSS/">CSS</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/">CSS &amp; HTML</a><span class="category-list-count">29</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/html5/">html5</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/javascript-amp-Ajax/">javascript &amp; Ajax</a><span class="category-list-count">2</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/javascript-amp-Ajax/移动端开发/">移动端开发</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/web-development/">web development</a><span class="category-list-count">2</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/web-development/移动端开发/">移动端开发</a><span class="category-list-count">1</span></li></ul></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/blog/">blog</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/computer-science/">computer science</a><span class="category-list-count">10</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/computer-science/java-web/">java web</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/computer-science/web-development/">web development</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/computer-science/算法/">算法</a><span class="category-list-count">2</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/html5/">html5</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/hybrid/">hybrid</a><span class="category-list-count">2</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/hybrid/phonegap/">phonegap</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/java-web/">java web</a><span class="category-list-count">10</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/javascript-amp-Ajax/">javascript &amp; Ajax</a><span class="category-list-count">23</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/javascript-amp-Ajax/jquery/">jquery</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/javascript-amp-Ajax/jquery/web-development/">web development</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/javascript-amp-Ajax/web-development/">web development</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/javascript-amp-Ajax/算法/">算法</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/jquery/">jquery</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/nodejs/">nodejs</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/php/">php</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/web-development/">web development</a><span class="category-list-count">15</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/前端/">前端</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/智趣/">智趣</a><span class="category-list-count">5</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/智趣/游戏/">游戏</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/智趣/生活/">生活</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/未分类/">未分类</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/模块化/">模块化</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/游戏/">游戏</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/生活/">生活</a><span class="category-list-count">6</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/资源/">资源</a><span class="category-list-count">1</span></li></ul>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">标签 Tags</h3>
    <div class="widget">
      <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/Angularjs/">Angularjs</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CSS/">CSS</a><span class="tag-list-count">21</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CSS-3/">CSS 3</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/D2/">D2</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/DIY/">DIY</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Design/">Design</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Structure/">Structure</a><span class="tag-list-count">8</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/android/">android</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/app/">app</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/blog/">blog</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/bug/">bug</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/css3/">css3</a><span class="tag-list-count">6</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/debug/">debug</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/dojo/">dojo</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/easy-ui/">easy ui</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/firefox/">firefox</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/flash/">flash</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/free-hosting/">free hosting</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/game/">game</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/geekTime/">geekTime</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/html/">html</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/html5/">html5</a><span class="tag-list-count">18</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/hybrid/">hybrid</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ie/">ie</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ios/">ios</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/java/">java</a><span class="tag-list-count">9</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/javascript/">javascript</a><span class="tag-list-count">28</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jquery/">jquery</a><span class="tag-list-count">7</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jquery-mobile/">jquery mobile</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jsp/">jsp</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/mobile/">mobile</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/nodejs/">nodejs</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/npm/">npm</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/photos/">photos</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/php/">php</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/requirejs/">requirejs</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/seam/">seam</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/svg/">svg</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/threejs/">threejs</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ued/">ued</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/w3c标准/">w3c标准</a><span class="tag-list-count">4</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/web/">web</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/webapp/">webapp</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/webgl/">webgl</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/webpage/">webpage</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/wordpress/">wordpress</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/上下文/">上下文</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/分享/">分享</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/前端/">前端</a><span class="tag-list-count">8</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/前端-Javascript-css-ES6/">前端 Javascript css ES6</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/学习/">学习</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/性能/">性能</a><span class="tag-list-count">4</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/总结/">总结</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/效率/">效率</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/模块化/">模块化</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/游戏/">游戏</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/理论/">理论</a><span class="tag-list-count">6</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/生活/">生活</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/社会化网络/">社会化网络</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/移动/">移动</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/移动端开发/">移动端开发</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/算法/">算法</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/编程/">编程</a><span class="tag-list-count">18</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/美女/">美女</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/翻译/">翻译</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/范式/">范式</a><span class="tag-list-count">4</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/设计模式/">设计模式</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/语义网/">语义网</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/语言/">语言</a><span class="tag-list-count">21</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/资源/">资源</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/转载/">转载</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/面向对象/">面向对象</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/风景/">风景</a><span class="tag-list-count">1</span></li></ul>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">标签云 Tag Cloud</h3>
    <div class="widget tagcloud">
      <a href="/tags/Angularjs/" style="font-size: 10px;">Angularjs</a> <a href="/tags/CSS/" style="font-size: 19.09px;">CSS</a> <a href="/tags/CSS-3/" style="font-size: 13.64px;">CSS 3</a> <a href="/tags/D2/" style="font-size: 10px;">D2</a> <a href="/tags/DIY/" style="font-size: 10px;">DIY</a> <a href="/tags/Design/" style="font-size: 10.91px;">Design</a> <a href="/tags/Structure/" style="font-size: 16.36px;">Structure</a> <a href="/tags/android/" style="font-size: 10px;">android</a> <a href="/tags/app/" style="font-size: 10px;">app</a> <a href="/tags/blog/" style="font-size: 10.91px;">blog</a> <a href="/tags/bug/" style="font-size: 10px;">bug</a> <a href="/tags/css3/" style="font-size: 14.55px;">css3</a> <a href="/tags/debug/" style="font-size: 10px;">debug</a> <a href="/tags/dojo/" style="font-size: 10px;">dojo</a> <a href="/tags/easy-ui/" style="font-size: 10px;">easy ui</a> <a href="/tags/firefox/" style="font-size: 10px;">firefox</a> <a href="/tags/flash/" style="font-size: 10px;">flash</a> <a href="/tags/free-hosting/" style="font-size: 10px;">free hosting</a> <a href="/tags/game/" style="font-size: 10px;">game</a> <a href="/tags/geekTime/" style="font-size: 10px;">geekTime</a> <a href="/tags/html/" style="font-size: 13.64px;">html</a> <a href="/tags/html5/" style="font-size: 18.18px;">html5</a> <a href="/tags/hybrid/" style="font-size: 11.82px;">hybrid</a> <a href="/tags/ie/" style="font-size: 10.91px;">ie</a> <a href="/tags/ios/" style="font-size: 10px;">ios</a> <a href="/tags/java/" style="font-size: 17.27px;">java</a> <a href="/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/tags/jquery/" style="font-size: 15.45px;">jquery</a> <a href="/tags/jquery-mobile/" style="font-size: 10.91px;">jquery mobile</a> <a href="/tags/jsp/" style="font-size: 10px;">jsp</a> <a href="/tags/mobile/" style="font-size: 10.91px;">mobile</a> <a href="/tags/nodejs/" style="font-size: 10px;">nodejs</a> <a href="/tags/npm/" style="font-size: 10px;">npm</a> <a href="/tags/photos/" style="font-size: 10px;">photos</a> <a href="/tags/php/" style="font-size: 10px;">php</a> <a href="/tags/requirejs/" style="font-size: 10.91px;">requirejs</a> <a href="/tags/seam/" style="font-size: 10.91px;">seam</a> <a href="/tags/svg/" style="font-size: 10px;">svg</a> <a href="/tags/threejs/" style="font-size: 10px;">threejs</a> <a href="/tags/ued/" style="font-size: 10.91px;">ued</a> <a href="/tags/w3c标准/" style="font-size: 12.73px;">w3c标准</a> <a href="/tags/web/" style="font-size: 13.64px;">web</a> <a href="/tags/webapp/" style="font-size: 10.91px;">webapp</a> <a href="/tags/webgl/" style="font-size: 10px;">webgl</a> <a href="/tags/webpage/" style="font-size: 10.91px;">webpage</a> <a href="/tags/wordpress/" style="font-size: 11.82px;">wordpress</a> <a href="/tags/上下文/" style="font-size: 10px;">上下文</a> <a href="/tags/分享/" style="font-size: 10.91px;">分享</a> <a href="/tags/前端/" style="font-size: 16.36px;">前端</a> <a href="/tags/前端-Javascript-css-ES6/" style="font-size: 10px;">前端 Javascript css ES6</a> <a href="/tags/学习/" style="font-size: 10px;">学习</a> <a href="/tags/性能/" style="font-size: 12.73px;">性能</a> <a href="/tags/总结/" style="font-size: 10.91px;">总结</a> <a href="/tags/效率/" style="font-size: 11.82px;">效率</a> <a href="/tags/模块化/" style="font-size: 10.91px;">模块化</a> <a href="/tags/游戏/" style="font-size: 11.82px;">游戏</a> <a href="/tags/理论/" style="font-size: 14.55px;">理论</a> <a href="/tags/生活/" style="font-size: 10.91px;">生活</a> <a href="/tags/社会化网络/" style="font-size: 10.91px;">社会化网络</a> <a href="/tags/移动/" style="font-size: 10px;">移动</a> <a href="/tags/移动端开发/" style="font-size: 10px;">移动端开发</a> <a href="/tags/算法/" style="font-size: 13.64px;">算法</a> <a href="/tags/编程/" style="font-size: 18.18px;">编程</a> <a href="/tags/美女/" style="font-size: 10px;">美女</a> <a href="/tags/翻译/" style="font-size: 13.64px;">翻译</a> <a href="/tags/范式/" style="font-size: 12.73px;">范式</a> <a href="/tags/设计模式/" style="font-size: 11.82px;">设计模式</a> <a href="/tags/语义网/" style="font-size: 10px;">语义网</a> <a href="/tags/语言/" style="font-size: 19.09px;">语言</a> <a href="/tags/资源/" style="font-size: 10.91px;">资源</a> <a href="/tags/转载/" style="font-size: 10px;">转载</a> <a href="/tags/面向对象/" style="font-size: 10px;">面向对象</a> <a href="/tags/风景/" style="font-size: 10px;">风景</a>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">文章 Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/07/">July 2018</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/06/">June 2018</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/08/">August 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/07/">July 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/04/">April 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/03/">March 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/08/">August 2015</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/03/">March 2015</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/12/">December 2014</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/11/">November 2014</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/10/">October 2014</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/05/">May 2014</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/04/">April 2014</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/03/">March 2014</a><span class="archive-list-count">7</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/02/">February 2014</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/01/">January 2014</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/12/">December 2013</a><span class="archive-list-count">9</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/11/">November 2013</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/10/">October 2013</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/09/">September 2013</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/08/">August 2013</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/07/">July 2013</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/06/">June 2013</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/05/">May 2013</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/03/">March 2013</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/01/">January 2013</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/11/">November 2012</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/08/">August 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/06/">June 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/05/">May 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/04/">April 2012</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/03/">March 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/02/">February 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/01/">January 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/12/">December 2011</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/11/">November 2011</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/10/">October 2011</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/09/">September 2011</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/08/">August 2011</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/07/">July 2011</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/06/">June 2011</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/04/">April 2011</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/02/">February 2011</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/01/">January 2011</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/12/">December 2010</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/11/">November 2010</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/10/">October 2010</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/09/">September 2010</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/08/">August 2010</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/06/">June 2010</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/04/">April 2010</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/01/">January 2010</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2009/08/">August 2009</a><span class="archive-list-count">1</span></li></ul>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">最近 Recents</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2018/07/23/nvm安装问题处理-nvm-is-not-compatible-with-the-npm-config-prefix-option-错误/">nvm安装问题处理 nvm is not compatible with the npm config prefix option 错误</a>
          </li>
        
          <li>
            <a href="/2018/06/06/前端知识体系大全/">前端知识体系大全</a>
          </li>
        
          <li>
            <a href="/2016/08/28/使用Angularjs开发控制台类项目/">使用Angularjs开发控制台类项目</a>
          </li>
        
          <li>
            <a href="/2016/07/11/Apicloud开发app的问题总结/">Apicloud开发app的问题总结</a>
          </li>
        
          <li>
            <a href="/2016/04/25/前端面试经典问题/">前端面试经典问题</a>
          </li>
        
      </ul>
    </div>
  </div>

  
      <div class="widget-wrap">
<h3 class="widget-title">友情链接 Links</h3>
<div class="widget">
<ul>
<li><a href="http://wande.me" title="玩的么" target="_blank">玩的么</a></li>
</ul>
</ul>
</div>
  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2018 宅鱼<br>
      更多游戏： <a href="http://wande.me"  target="_blank">玩的么</a><br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">首页</a>
  
    <a href="/archives" class="mobile-nav-link">文章</a>
  
    <a href="/raincss" class="mobile-nav-link">RainCSS</a>
  
</nav>
    <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"rainzhai"};
  (function() {
    var ds = document.createElement('script');
    ds.type = 'text/javascript';ds.async = true;
    ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
    ds.charset = 'UTF-8';
    (document.getElementsByTagName('head')[0] 
     || document.getElementsByTagName('body')[0]).appendChild(ds);
  })();
  </script>
<!-- 多说公共JS代码 end -->

<script type="text/javascript" src="http://wandeme.com/js/jquery-1.7.2.min.js"></script>

<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F49ba6eabd43121d820d9120777bdaf30' type='text/javascript'%3E%3C/script%3E"));
</script>


  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
  <script src="/fancybox/jquery.fancybox.pack.js"></script>


<script src="/js/script.js"></script>

  </div>
</body>
</html>